<template>
  <div class="packet-table packet-time">
    <div class="table-head">
      <div class="item title">定额名称</div>
      <div class="item price">金额</div>
      <div class="item duration">时长(分钟)</div>
      <div class="item time">可用时段</div>
      <div class="item type">包时类型</div>
      <div class="item auth">会员权限</div>
    </div>
    <div class="table-body">
      <div class="tbody" :class="cellClass(item)" v-for="(item,index) in list" @click="cellClick(item)">
        <div class="td">
          <div class="checked" v-if="item.id == id"><span class="iconfont icon-gou"/></div>
          <div class="item title">{{item.name}}</div>
          <div class="item price">{{item.price}}</div>
          <div class="item duration">{{item.duration}}</div>
          <div class="item time">{{item.startTime + '-' + item.endTime}}</div>
          <div class="item type">{{item.type == 1 ? '标准定额': '包时长定额'}}</div>
          <div class="item auth">{{item.privilegeCardName || '全部'}}</div>
        </div>
        <div class="tf">可用区域：{{item.areaName}}</div>
      </div>
      <div class="no-data" v-if="!list.length">暂无可用包时</div>
    </div>
  </div>
</template>
<script>
import {rateActivity} from "@/api/packageTime";
import {mapGetters} from "vuex";

export default {
  name: "packetTime",
  props: {
    memberInfo: {type: Object, default: () => {}}
  },
  data() {
    return {
      id: 0,
      columns: [
        {title: '定额名称', key: 'name', tooltip: true},
        {title: '金额', key: 'price', align: 'center', width: 80},
        {title: '可用时段', key:'startTime', align: 'center', render: (h, params) => {
          return h('div', [params.row.startTime + '-' + params.row.endTime])
        }},
        {title: '时长(分钟)', key: 'duration', align: 'center'},
        {title: '可用区域', key: 'areaName', align: 'center', tooltip: true},
        {title: '包时类型', key: 'type', align: 'center', render: (h, params) => {
          return h('div', [params.row.type == 1 ? '标准定额': '包时长定额'])
        }},
        {title: '会员权限', key: 'privilegeCardName', align: 'center', render: (h, params) => {
          return h('div', [params.row.privilegeCardName || '全部'])
        }},
      ],
      list: [],
      loading: false,
    }
  },
  computed: {
    ...mapGetters(['memberId'])
  },
  methods: {
    getList() {
      this.id = 0
      this.loading = true
      rateActivity({memberId: this.memberId}).then(res => {
        this.list = res.data
        if (res.data.length > 0) {
        } else {
          this.$Message.error("暂无可用包时套餐")
        }
      }).finally(() => {
        this.loading = false
      })
    },
    disable(row) {
      // 禁用或有定额或有预定不可选
      return row.status == 2 || this.memberInfo.entriesId || this.memberInfo.reserveQuotaId
    },
    cellClass(row, index) {
      let obj = {}
      if (this.disable(row)) {
        return 'disabled'
      } else if (row.id == this.id && this.id != null) {
        obj = 'active cursor'
      } else {
        obj = 'normal cursor'
      }
      return obj
    },
    cellClick(row) {
      if (this.disable(row)) return
      if (row.id == this.id) {
        this.id = null
        this.$emit('select', null)
        return
      }
      this.id = row.id
      let item = this.list.find(item => item.id == this.id)
      this.$emit('select', item)
    },
  },
}
</script>


<style scoped lang="scss">

</style>
